<template>
  <div class="box">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>详情</span>
      <span>推荐</span>
      <!-- 右侧更多 -->
      <template>
        <van-icon @click="Menu" name="ellipsis" size="40"/>
        <div class="menu" v-show="isShow">
          <div class="menuitem" @click="go('Home')"><van-icon name="wap-home" />首页</div>
          <div class="menuitem" @click="go('My')"><van-icon name="manager" /> 我的</div>
          <div class="menuitem" >
            <van-icon name="share" @click="showShare = true"/> 分享
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options1="options1"
              @select="onSelect"
            />
          </div>
        </div>
      </template>
    </div>
    <main class="center">
      <!-- 该商品的详细信息 -->
      <div class="content">
        <div class="banner"><img :src="goods.img1" alt="" /></div>
        <div class="desc">
          <p class="p1">
            <span class="price">￥{{ goods.originprice }}</span>
            <span class="sale">销量{{ goods.sales }}</span>
          </p>
          <p class="title">
            <span class="brand">{{ goods.brand }}</span>
            <span class="category">{{ goods.category }}</span>
            <b class="name">{{ goods.proname }}</b>
          </p>
        </div>
      </div>
      <!-- 送至 -->
      <div class="place">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="送至"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>
      <!-- 猜你喜欢 -->
      <div class="like">
        <b>猜你喜欢</b>
        <ul>
          <li v-for="obj in like" :key="obj.proid" @click="goDetail(obj.proid)">
            <img :src="obj.img1" alt="" />
            <p class="like-name">{{ obj.proname }}</p>
            <p class="like-price">￥{{ obj.originprice }}</p>
          </li>
        </ul>
      </div>
    </main>
    <!-- 底部 -->
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon"
        />
        <van-goods-action-icon
          icon="star"
          text="已收藏"
          color="#ff5000"
          @click="onClickIcon"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickButton"
        />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "GoodsDetail",
  data() {
    return {
      goods: {},
      like: [],
      isShow:false,

      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],

      showShare: false,
      options1: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      
    };
  },
  created() {
    let proid = this.$route.params.goodsid;
    axios({
      url: "/api/pro/detail/" + proid,
    }).then((res) => {
      if (res.data.code == 200) {
        this.goods = res.data.data;
      }
    });
    // 喜欢列表
    axios({
      url: "/api/pro/recommendlist",
    }).then((res) => {
      if (res.data.code == 200) {
        this.like = res.data.data;
      }
    });
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onClickIcon() {},

    onClickButton() {
    //加入购物车
    axios({
        method:"post",
        url:"/api/cart/add",
        data:{
          userid:localStorage.getItem("userid"),
          proid:this.$route.params.goodsid,
          num:1
        }
      }).then((res)=>{
        console.log('res: ', res);
        if (res.data.code == "200") {
        alert('加入购物车成功');
      }
      })
    }, 

    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    goDetail(goodsid) {
      this.$router.push("/GoodsDetail/" + goodsid);
      // 重加载之前的模块
      window.location.reload();
    },
    go(path){
      this.$router.push("/"+path)
    },
    Menu(){
      this.isShow=true;
     setTimeout(function(){
      window.location.reload();
     },6000)
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style scoped>
.category {
  background: linear-gradient(to right, rgba(255, 96, 52), rgb(238, 10, 36));
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.head {
  width: 100%;
  height: 3rem;
  background-color: transparent;
  padding: 0.625rem 0;
}
/* .van-nav-bar{} */
main {
  overflow: auto;
  flex: 1;
  background-color: rgb(233, 229, 229);
}
.content {
  width: 100%;
  background-color: white;
  margin-bottom: 0.625rem;
  border-radius: 0 0 1rem 1rem;
  padding-bottom: 0.625rem;
}
.banner {
  height: 25rem;
}
img {
  width: 100%;
  height: 100%;
}
p {
  padding: 0 1.25rem;
}
.price {
  float: left;
  color: #ee0a24;
  font-size: 1.5rem;
}
.sale {
  float: right;
  line-height: 2rem;
}
.p1 {
  overflow: hidden;
}
.brand,
.category {
  display: inline-block;
  padding: 0 0.3125rem;
  color: white;
  font-weight: 700;
  border-radius: 0.3125rem;
  margin-right: 0.3125rem;
}
.brand {
  background-color: #ee0a24;
}
.category {
  background-color: #1989fa;
}
.place {
  height: 3.125rem;
}
.like {
  background-color: white;
  padding: 0.625rem;
  overflow: hidden;
}
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  width: 48%;
  margin-bottom: 0.625rem;
  /* height: 25rem; */
}
li img {
  width: 100%;
  height: 9.8125rem;
}
.like-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
}
.like-price {
  color: #ee0a24;
  padding: 0;
}

.footer {
  height: 3.75rem;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.van-icon {
  float: left;
  padding-left: 10px;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}

.menu{
  width: 6rem;
  height: 9.5rem;
  background-color: rgb(102, 94, 94);
  border-radius: 10px;
  display: flex;
  padding: 1rem 1rem;
  flex-direction: column;
  flex-wrap: nowrap;
  font-size: 14px;
  color: #fff;
  position: absolute;
  right: .8333rem;
  top: 2.6667rem;
}
.menu .menuitem{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.menu .van-icon{
  color: #fff;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}
</style>